<template>
  <div>
    <el-button class="btnsize" icon="iconfont icon-kaishi" style="background: #067FB5; color: #fff;" size="small" @click="containerState">
      {{ $t('Button_Start') }}</el-button>
    <el-button class="btnsize" icon="iconfont icon-tingzhi" type="danger" size="small" @click="containerStop">{{ $t('Button_Stop') }}</el-button>
    <el-button class="btnsize" icon="iconfont icon-zhongzhi" type="danger" size="small" @click="containerKill">{{ $t('Button_Terminate') }}</el-button>
    <el-button class="btnsize" icon="iconfont icon-zhongqi" style="background: #067FB5; color: #fff;" size="small" @click="containerRestart">{{ $t('Button_Restart') }}</el-button>
    <el-button class="btnsize" icon="iconfont icon-zantingtingzhi" style="background: #067FB5; color: #fff;" size="small" @click="containerPause">
      {{ $t('Button_Pause') }}</el-button>
    <el-button class="btnsize" icon="iconfont icon-huifu" style="background: #067FB5; color: #fff;" size="small" @click="containerUnpause">{{$t('Button_Resume')}}</el-button>
    <el-button class="btnsize" icon="iconfont icon-lajitong" type="danger" size="small" @click="containerDel">{{$t('Button_Delete')}}</el-button>
    <el-button class="btnsize" icon="iconfont icon-add" type="success" size="small" @click="linkAdd" v-show="state ? false : true">{{$t('Button_Create')}}</el-button>
  </div>
</template>

<script>
import post from '@/utils/post'
export default {
  props: ['multipleSelection', 'state', 'continerState'],
  watch: {
    // 监听用户点击时的状态，做出响应操作
    continerState: function (newdata, olddata) {
      const data = newdata[(newdata.length - 1)]
      if (data === 1) {
        this.containerStop()
      } else if (data === 2) {
        this.containerState()
      }
    }
  },
  methods: {
    // 跳转添加容器
    linkAdd () {
      this.$router.push('/Container/AddContainer')
    },
    // 启动容器
    containerState () {
      let loadingInstance1 = this.$loading({ text: '安装中',background: 'rgba(0, 0, 0, 0.8)' });
      // 判断是否选择了容器
      if (this.multipleSelection.length === 0) {
        // this.$message({
        //   showClose: true,
        //   message: '未选择容器！',
        //   type: 'warning'
        // })
        this.$emit('setListLog',{
          title:'未选择容器',
          type: 'warning'
        })
        return loadingInstance1.close()
      }
      // 判断选中是容器是否是运行中的，或是暂停的容器
      const isrun = this.multipleSelection.filter(item => {
        return item.State === 'running' || item.State === 'paused'
      })
      if (isrun.length > 0) {
        // this.$message({
        //   showClose: true,
        //   message: '选择容器中有已运行容器，请取消选择后重试！',
        //   type: 'warning'
        // })
        this.$emit('setListLog',{
          title:'选择容器中有已运行容器，请取消选择后重试！',
          type: 'warning'
        })
        return loadingInstance1.close()
      }
      // 循环启动选择的容器
      for (let i = 0; i < this.multipleSelection.length; i++) {
        const docker = `curl -w %{http_code} --unix-socket /var/run/docker.sock -s -X POST "http:/v1.40/containers/${this.multipleSelection[i].Id}/start"`
        post({ docker }, (res) => {
          if (res.message) {
            // this.$message({
            //   showClose: true,
            //   message: res.message,
            //   type: 'error'
            // })
            this.$emit('setListLog',{
              title: res.message,
              type: 'error'
            })
            return
          }
          if (res >= 200 && res < 300) {
            // this.$message({
            //   showClose: true,
            //   message: '容器运行成功！',
            //   type: 'success'
            // })
            this.$emit('setListLog',{
              title: '容器运行成功！',
              type: 'success'
            })
            // 更改vuex中的状态值，让父组件重新获取容器列表信息
            this.$store.commit('changeIsFetchContainer', true)
          } else {
            // this.$message({
            //   showClose: true,
            //   message: '网络不畅，请重试！',
            //   type: 'error'
            // })
            this.$emit('setListLog',{
              title: '网络不畅，请重试！',
              type: 'success'
            })
          }
        }, this)
      }
      loadingInstance1.close()
    },
    // 停止容器
    containerStop () {
      // 判断是否选择了容器
      let loadingInstance1 = this.$loading({ text: '安装中',background: 'rgba(0, 0, 0, 0.8)' });
      if (this.multipleSelection.length === 0) {
        // this.$message({
        //   showClose: true,
        //   message: '未选择容器！',
        //   type: 'warning'
        // })
        this.$emit('setListLog',{
          title: '未选择容器！',
          type: 'warning'
        })
        return loadingInstance1.close();
      }
      // 判断选中容器是否已经停止，或暂停状态
      const isrun = this.multipleSelection.filter(item => {
        return item.State === 'exited' || item.State === 'paused'
      })
      if (isrun.length > 0) {
        // this.$message({
        //   showClose: true,
        //   message: '选择容器中有已停止或暂停容器，请取消选择后重试！',
        //   type: 'warning'
        // })
        this.$emit('setListLog',{
          title: '选择容器中有已停止或暂停容器，请取消选择后重试！',
          type: 'warning'
        })
        return loadingInstance1.close();
      }
      // 循环暂停容器
      for (let i = 0; i < this.multipleSelection.length; i++) {
        const docker = `curl -w %{http_code} --unix-socket /var/run/docker.sock -s -X POST "http:/v1.40/containers/${this.multipleSelection[i].Id}/stop"`
        post({ docker }, (res) => {
          if (res.message) {
            // this.$message({
            //   showClose: true,
            //   message: res.message,
            //   type: 'error'
            // })
            this.$emit('setListLog',{
              title: res.msg,
              type: 'error'
            })
            return 
          }
          if (res >= 200 && res < 300) {
            // this.$message({
            //   showClose: true,
            //   message: '容器停止成功！',
            //   type: 'success'
            // })
            this.$emit('setListLog',{
              title: '容器停止成功！',
              type: 'success'
            })
            // 更改vuex中的状态值，让父组件重新获取容器列表信息
            this.$store.commit('changeIsFetchContainer', true)
          } else {
            // this.$message({
            //   showClose: true,
            //   message: '网络不畅，请重试！',
            //   type: 'error'
            // })
            this.$emit('setListLog',{
              title: '网络不畅，请重试！',
              type: 'error'
            })
          }
        }, this)
      }
      loadingInstance1.close();
    },
    // 删除容器
    containerDel () {
      if (this.multipleSelection.length === 0) {
        let loadingInstance1 = this.$loading({ text: '安装中',background: 'rgba(0, 0, 0, 0.8)' });
        // this.$message({
        //   showClose: true,
        //   message: '未选择容器！',
        //   type: 'warning'
        // })
        this.$emit('setListLog',{
          title: '未选择容器！',
          type: 'warning'
        })
        return loadingInstance1.close();
      }
      const isrun = this.multipleSelection.filter(item => {
        return item.State === 'running' || item.State === 'paused'
      })
      let isforce = false
      if (isrun.length > 0) {
        isforce = confirm('选择有已运行或暂停容器，是否强制删除？')
        if (!isforce) {
          return
        }
      }
      let loadingInstance1 = this.$loading({ text: '安装中',background: 'rgba(0, 0, 0, 0.8)' });
      for (let i = 0; i < this.multipleSelection.length; i++) {
        const docker = `curl -w %{http_code} --unix-socket /var/run/docker.sock -s -X DELETE "http:/v1.40/containers/${this.multipleSelection[i].Id}?force=${isforce}"`
        post({ docker }, (res) => {
          if (res.message) {
            // this.$message({
            //   showClose: true,
            //   message: res.message,
            //   type: 'error'
            // })
            this.$emit('setListLog',{
              title: res.message,
              type: 'error'
            })
            return
          }
          if (res >= 200 && res < 300) {
            // this.$message({
            //   showClose: true,
            //   message: '容器删除成功！',
            //   type: 'success'
            // })
            this.$emit('setListLog',{
              title: '容器删除成功！',
              type: 'success'
            })
            // 更改vuex中的状态值，让父组件重新获取容器列表信息
            this.$store.commit('changeIsFetchContainer', true)
          } else {
            // this.$message({
            //   showClose: true,
            //   message: '网络不畅，请重试！',
            //   type: 'error'
            // })
            this.$emit('setListLog',{
              title: '网络不畅，请重试！',
              type: 'error'
            })
          }
        }, this)
      }
      loadingInstance1.close()
    },
    // 强制停止容器
    containerKill () {
      let loadingInstance1 = this.$loading({ text: '安装中',background: 'rgba(0, 0, 0, 0.8)' });
      if (this.multipleSelection.length === 0) {
        // this.$message({
        //   showClose: true,
        //   message: '未选择容器！',
        //   type: 'warning'
        // })
        this.$emit('setListLog',{
          title: '未选择容器！',
          type: 'warning'
        })
        return loadingInstance1.close()
      }
      const isrun = this.multipleSelection.filter(item => {
        return item.State === 'exited'
      })
      if (isrun.length > 0) {
        // this.$message({
        //   showClose: true,
        //   message: '选择容器中有已停止容器，请取消选择后重试！',
        //   type: 'warning'
        // })
        this.$emit('setListLog',{
          title: '选择容器中有已停止容器，请取消选择后重试！',
          type: 'warning'
        })
        return loadingInstance1.close()
      }
      if (confirm('强制终止容器可能会造成数据丢失，是否确认操作？')) {
        for (let i = 0; i < this.multipleSelection.length; i++) {
          const docker = `curl -w %{http_code} --unix-socket /var/run/docker.sock -s -X POST "http:/v1.40/containers/${this.multipleSelection[i].Id}/kill"`
          post({ docker }, (res) => {
            if (res.message) {
              // this.$message({
              //   showClose: true,
              //   message: res.message,
              //   type: 'error'
              // })
              this.$emit('setListLog',{
                title: res.message,
                type: 'error'
              })
              return
            }
            if (res >= 200 && res < 300) {
              // this.$message({
              //   showClose: true,
              //   message: '容器强制停止成功！',
              //   type: 'success'
              // })
              this.$emit('setListLog',{
                title: '容器强制停止成功！',
                type: 'success'
              })
              this.$store.commit('changeIsFetchContainer', true)
            } else {
              // this.$message({
              //   showClose: true,
              //   message: '网络不畅，请重试！',
              //   type: 'error'
              // })
              this.$emit('setListLog',{
                title: '网络不畅，请重试！',
                type: 'error'
              })
            }
          }, this)
        }
      }
      loadingInstance1.close()
    },
    // 重启容器
    containerRestart () {
      let loadingInstance1 = this.$loading({ text: '安装中',background: 'rgba(0, 0, 0, 0.8)' });
      if (this.multipleSelection.length === 0) {
        // this.$message({
        //   showClose: true,
        //   message: '未选择容器！',
        //   type: 'warning'
        // })
        this.$emit('setListLog',{
          title: '未选择容器！',
          type: 'warning'
        })
        return loadingInstance1.close()
      }
      const isrun = this.multipleSelection.filter(item => {
        return item.State === 'exited' || item.State === 'paused'
      })
      if (isrun.length > 0) {
        // this.$message({
        //   showClose: true,
        //   message: '选择容器中有已停止或暂停容器，请取消选择后重试！',
        //   type: 'warning'
        // })
        this.$emit('setListLog',{
          title: '选择容器中有已停止或暂停容器，请取消选择后重试！',
          type: 'warning'
        })
        return loadingInstance1.close()
      }
      for (let i = 0; i < this.multipleSelection.length; i++) {
        const docker = `curl -w %{http_code} --unix-socket /var/run/docker.sock -s -X POST "http:/v1.40/containers/${this.multipleSelection[i].Id}/restart"`
        post({ docker }, (res) => {
          if (res.message) {
            // this.$message({
            //   showClose: true,
            //   message: res.message,
            //   type: 'error'
            // })
            this.$emit('setListLog',{
              title: res.message,
              type: 'error'
            })
            return
          }
          if (res >= 200 && res < 300) {
            // this.$message({
            //   showClose: true,
            //   message: '容器重启成功！',
            //   type: 'success'
            // })
            this.$emit('setListLog',{
              title: '容器重启成功！',
              type: 'success'
            })
            // 更改vuex中的状态值，让父组件重新获取容器列表信息
            this.$store.commit('changeIsFetchContainer', true)
          } else {
            // this.$message({
            //   showClose: true,
            //   message: '网络不畅，请重试！',
            //   type: 'error'
            // })
            this.$emit('setListLog',{
              title: '网络不畅，请重试！',
              type: 'error'
            })
          }
        }, this)
      }
      loadingInstance1.close()
    },
    // 暂停容器
    containerPause () {
      let loadingInstance1 = this.$loading({ text: '安装中',background: 'rgba(0, 0, 0, 0.8)' });
      if (this.multipleSelection.length === 0) {
        // this.$message({
        //   showClose: true,
        //   message: '未选择容器！',
        //   type: 'warning'
        // })
        this.$emit('setListLog',{
          title: '未选择容器！',
          type: 'warning'
        })
        return loadingInstance1.close()
      }
      const isrun = this.multipleSelection.filter(item => {
        return item.State === 'exited' || item.State === 'paused'
      })
      if (isrun.length > 0) {
        // this.$message({
        //   showClose: true,
        //   message: '选择容器中有已停止或已暂停容器，请取消选择后重试！',
        //   type: 'warning'
        // })
        this.$emit('setListLog',{
          title: '选择容器中有已停止或已暂停容器，请取消选择后重试！',
          type: 'warning'
        })
        return loadingInstance1.close()
      }
      for (let i = 0; i < this.multipleSelection.length; i++) {
        const docker = `curl -w %{http_code} --unix-socket /var/run/docker.sock -s -X POST "http:/v1.40/containers/${this.multipleSelection[i].Id}/pause"`
        post({ docker }, (res) => {
          if (res.message) {
            // this.$message({
            //   showClose: true,
            //   message: res.message,
            //   type: 'error'
            // })
            this.$emit('setListLog',{
              title: res.message,
              type: 'error'
            })
            return
          }
          if (res >= 200 && res < 300) {
            // this.$message({
            //   showClose: true,
            //   message: '容器暂停成功！',
            //   type: 'success'
            // })
            this.$emit('setListLog',{
              title: '容器暂停成功！',
              type: 'success'
            })
            // 更改vuex中的状态值，让父组件重新获取容器列表信息
            this.$store.commit('changeIsFetchContainer', true)
          } else {
            // this.$message({
            //   showClose: true,
            //   message: '网络不畅，请重试！',
            //   type: 'error'
            // })
            this.$emit('setListLog',{
              title: '网络不畅，请重试！',
              type: 'error'
            })
          }
        }, this)
      }
      loadingInstance1.close()
    },
    // 取消暂停，恢复
    containerUnpause () {
      let loadingInstance1 = this.$loading({ text: '安装中',background: 'rgba(0, 0, 0, 0.8)' });
      if (this.multipleSelection.length === 0) {
        // this.$message({
        //   showClose: true,
        //   message: '未选择容器！',
        //   type: 'warning'
        // })
        this.$emit('setListLog',{
          title: '未选择容器！',
          type: 'warning'
        })
        return loadingInstance1.close()
      }
      const isrun = this.multipleSelection.filter(item => {
        return item.State !== 'paused'
      })
      if (isrun.length > 0) {
        // this.$message({
        //   showClose: true,
        //   message: '选择容器中有未暂停或已停止容器，请取消选择后重试！',
        //   type: 'warning'
        // })
        this.$emit('setListLog',{
          title: '选择容器中有未暂停或已停止容器，请取消选择后重试！',
          type: 'warning'
        })
        return loadingInstance1.close()
      }
      for (let i = 0; i < this.multipleSelection.length; i++) {
        const docker = `curl -w %{http_code} --unix-socket /var/run/docker.sock -s -X POST "http:/v1.40/containers/${this.multipleSelection[i].Id}/unpause"`
        post({ docker }, (res) => {
          if (res.message) {
            // this.$message({
            //   showClose: true,
            //   message: res.message,
            //   type: 'error'
            // })
            this.$emit('setListLog',{
              title: res.message,
              type: 'error'
            })
            return
          }
          if (res >= 200 && res < 300) {
            // this.$message({
            //   showClose: true,
            //   message: '容器恢复成功！',
            //   type: 'success'
            // })
            this.$emit('setListLog',{
              title: '容器恢复成功！',
              type: 'success'
            })
            // 更改vuex中的状态值，让父组件重新获取容器列表信息
            this.$store.commit('changeIsFetchContainer', true)
          } else {
            // this.$message({
            //   showClose: true,
            //   message: '网络不畅，请重试！',
            //   type: 'error'
            // })
            this.$emit('setListLog',{
              title: '网络不畅，请重试！',
              type: 'error'
            })
          }
        }, this)
      }
      loadingInstance1.close()
    }
  }
}
</script>

<style lang="scss" scoped>
button{
  font-weight: bold;
}
.btnsize{
  font-size: 12px !important;
  margin-bottom: 10px;
}
</style>
